<template>
  <view class="box" v-if="chat">
    <view class="extend" v-if="chat.extend">
      <view class="text">
        {{ chat.extend }}
      </view>
    </view>
    <view
      class="chat-item"
      :class="{ self: chat.self, refresh: chat.refresh }"
      v-if="chat.type != 'system'"
    >
      <view class="avatar">
        <image class="img" :src="chat.avatar" mode="widthFix"></image>
      </view>
      <view class="content" :class="[chat.type]">
        <view class="text">
          <image
            mode="widthFix"
            class="img image"
            v-if="chat.type == 'image'"
            :src="chat.content"
            @click="onPreview"
          >
          </image>
          <block v-else-if="chat.type == 'faq'">
            <view class="head" v-if="chat.title">
              {{ chat.title }}
            </view>

            <image
              :src="imgBaseUrlV2 + 'kefu_qipao.png'"
              mode="widthFix"
              class="icon"
              v-if="chat.title"
            />
            <view
              class="faq-item"
              v-for="(faq, fIndex) in chat.content"
              :key="fIndex"
              @click="onClckFaq(faq, fIndex)"
            >
              <block v-if="chat.index">{{ fIndex + 1 }}. </block>{{ faq.label }}
            </view>
          </block>
          <block v-else>
            <rich-text :nodes="getContent"></rich-text>
          </block>
        </view>

        <view
          class="exchange"
          v-if="chat.type == 'faq'"
          @click="onClickExchange"
        >
          换一批
          <image :src="imgBaseUrlV2 + 'kehu_qiehuan.png'" class="icon" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
export default {
  props: {
    chat: {
      type: Object,
      default() {
        return null;
      },
    },
    index: {
      default: -1,
    },
    userId: {
      default: "",
    },
    imgBaseUrlV2: {
      default: imgBaseUrlV2,
    },
  },
  computed: {
    getContent() {
      let nodes = this.chat.content || "";
      return nodes;
    },
  },
  methods: {
    onPreview() {
      this.$emit("preview");
    },
    onClckFaq(item, index) {
      this.$emit("faq", item, index, this.chat, this.index);
    },
    onClickExchange() {
      this.$emit("exchange", this.chat, this.index);
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box {
  .extend {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    line-height: 1.8;
    color: color-desc;
    margin: 12rpx auto 16rpx;

    >.text {
      min-width: 50rpx;
      background: #eee;
      border-radius: 60rpx;
      padding: 0 16rpx;
      text-align: center;
    }
  }
}

.chat-item {
  display: flex;
  padding: 0 24rpx;
  color: color-describe;

  img, image, uni-image, .image {
    display: block;
    max-width: 190rpx;
    max-height: 190rpx;
  }

  &.self {
    flex-direction: row-reverse;

    >.content {
      >.text {
        background: color-active;
        color: #fff;
      }

      &:after {
        left: auto;
        right: -15rpx;
        top: 16rpx;
        border-top: 22rpx solid transparent;
        border-bottom: 22rpx solid transparent;
        border-left: 28rpx solid color-active;
        border-right: none;
      }
    }
  }

  >.avatar {
    flex: 0 0 auto;

    >.img {
      width: 90rpx;
      height: 90rpx;
      border-radius: 100rpx;
    }
  }

  &.refresh {
    .exchange {
      >.icon {
        animation: rotate 0.5s 0s infinite;
        animation-timing-function: linear;
      }
    }
  }

  .exchange {
    display: flex;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: color-active;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 16rpx;

    >.icon {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-left: 16rpx;
      transform-origin: center center;
    }
  }

  >.content {
    position: relative;
    z-index: 2;
    font-size: 28rpx;
    margin: 0 20rpx;
    line-height: 44rpx;
    margin-top: 6rpx;
    max-width: 590rpx;

    &.faq {
      width: 590rpx;
      max-width: inherit;

      >.text {
        padding-bottom: 8rpx;
      }

      .faq-item {
        border-bottom: 1rpx solid #D8D8D8;
        padding: 18rpx 0;
        line-height: 46rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-describe;

        &:last-child {
          border-bottom: none;
        }
      }
    }

    >.text {
      position: relative;
      z-index: 2;
      background: #fff;
      padding: 16rpx 20rpx;
      border-radius: 16rpx;
      min-height: 76rpx;
      min-width: 76rpx;

      >.head {
        position: relative;
        display: inline-block;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        color: color-active;
        padding-right: 120rpx;
        line-height: 1.6;
        margin-bottom: 10rpx;

        &:after {
          position: absolute;
          content: '';
          max-width: 144rpx;
          bottom: 0;
          left: 0;
          height: 16rpx;
          width: 100%;
          background: rgba(35, 73, 154, 0.05);
        }
      }

      >.icon {
        position: absolute;
        display: block;
        width: 108rpx;
        height: 132rpx;
        right: 0;
        top: 0;
      }
    }

    &:after {
      position: absolute;
      z-index: 1;
      display: block;
      content: '';
      width: 0;
      height: 0;
      left: -15rpx;
      top: 20rpx;
      border-top: 22rpx solid transparent;
      border-bottom: 22rpx solid transparent;
      border-right: 28rpx solid #fff;
    }
  }
}

.faq-item {
  color: color-active;
  line-height: 1.8;
}
</style>